<template>
  <div>
    <el-row class="con-button-rows">
      <el-col>
        <el-button-group>
          <el-button
            v-if="buttonDisplay.add"
            :disabled="allOptionsDisabled || buttonDisabled.add"
            icon="Plus"
            @click="addRow()"
          />
          <el-button
            v-if="buttonDisplay.delete"
            :disabled="
              (currentSelection && currentSelection.length < 1) ||
              buttonDisabled.delete
            "
            icon="Delete"
            @click="onDelete()"
          />
          <slot name="extra-button"></slot>
        </el-button-group>
      </el-col>
    </el-row>
    <MyTable
      ref="editTable"
      class="common-table"
      :data-source="dataSource"
      row-id="table_edit_id"
      :columns="columns"
      :loading="tableLoading"
      :page="false"
      :edit-config="{ ...editConfig, showIcon: false }"
      :max-height="maxHeight"
      :defaultHeight="defaultHeight"
      :set-height="height"
      :showToolbar="showToolbar"
      :edit-rules="editRules"
      :footerData="footerData"
      :footerAlign="footerAlign"
      :show-footer="showFooter"
      @handle-keydown="handleKeydown"
      @checkbox-change="checkboxChange"
      @checkbox-all="checkboxAll"
      :enable-Column-Drop="enableColumnDrop"
      :select-row-by-single-click="false"
      :footer-cell-class-name="footerCellClassName"
    />
    <el-button v-if="buttonDisplay.save" @click="handleSave()" class="save-btn">
      {{ $t("保存") }}
    </el-button>
  </div>
</template>
<script setup>
import { ref, defineEmits ,computed} from "vue";
import i18n from "@/lang";

const editTable = ref();
const emits = defineEmits([
  "onSubmit",
  "onDelete",
  "handleKeydown",
  "checkboxChange",
  "checkboxAll",
]);
const props = defineProps({
  // 表尾单元格样式类名
  footerCellClassName: {
    type: String,
    default: "",
  },
  // 表尾列的对齐方式
  footerAlign: {
    type: String,
  },
  // 是否显示表尾
  showFooter: {
    type: Boolean,
    default() {
      return false;
    },
  },
  // 表尾数据
  footerData: {
    type: Array,
  },
  // 表格加载
  tableLoading: { type: Boolean, default: false },
  // 修改规则
  editRules: {
    type: Object,
    default() {
      return {};
    },
  },
  // 是否启用列拖动
  enableColumnDrop: { type: Boolean, default: true },
  showToolbar: {
    type: Boolean,
    default() {
      return true;
    },
  },
  height: { type: Number, default: null },
  defaultHeight: { type: Number, default: null },
  maxHeight: { type: Number, default: null },
  buttonDisabled: {
    type: Object,
    default: () => {
      return { add: false, delete: false };
    },
  },
  buttonDisplay: {
    type: Object,
    default: () => {
      return { add: true, delete: true, save: false };
    },
  },
  dataSource: {
    type: Array,
    default: () => [],
  },
  columns: {
    type: Array,
    default: () => [],
  },
  allOptionsDisabled: {
    type: Boolean,
    default: false,
  },
  addRow: {
    type: Function,
    default: () => {
      console.log(i18n.global.t("addRow函数没有定义"));
    },
  },
  editConfig: {
    type: Object,
    default: () => {
      return {
        trigger: "click",
        mode: "row",
        enabled: true,
        showStatus: true,
      };
    },
  },
});
// 已勾选的对象数组
const currentSelection = computed(
  () => editTable.value && editTable.value.getCheckboxRecords()
);
// 保存处理
async function handleSave() {
  emits("onSubmit", props.dataSource);
}
// 删除勾选项
function onDelete() {
  emits("onDelete", currentSelection.value);
}
function handleKeydown(e) {
  emits("handleKeydown", e);
}
// 列表校验
const validEvent = async () => {
  const $table = editTable.value;
  if ($table) {
    return await $table.validEvent(true);
  }
};
function checkboxChange({
  checked,
  row,
}) {
  emits("checkboxChange", { checked, row });
}
function checkboxAll({
  checked,
  row,
}) {
  emits("checkboxAll", { checked, row });
}
defineExpose({
  editTable,
  validEvent,
});
</script>
